<template>

    <div class="app" @lifecycle="lifecycle">

        <navbar class="page-navbar" :eeui="{backgroundColor:'#FFFFFF'}">
            <navbar-item type="left" @click="goBack()">
              <text class="chinahandfont iconl">&#xe69a;</text>
            </navbar-item>
            <navbar-item type="title">
                <text class="page-navbar-title">Introduction</text>
            </navbar-item>
            
        </navbar>
        <div class="page-content">
            <div class="imgWrp">
              <image class="imgH" :src="detailObj.pictureUrl"></image>
              <!-- <image class="imgH" src="../assets/introduction.png"></image> -->
            </div>
            <div class="txtWrp">
              <web-view ref="reflectName" class="webview" :eeui="{content: detailObj.details}"> </web-view>
              <!-- <text class="infoTxt">Wuhou Temple (Han Zhaolie Temple), a national key cultural relics protection unit, a national AAAA-level tourist attraction, and a national first-class museum.

Wuhou Temple is located in Wuhou District, Chengdu City, Sichuan Province. It was built in 223 AD when it was built in Liubei Huiling. It is the only temple in China and the most prestigious Zhuge Liang, Liu Bei and Yi Han heroes. It is also a national influence. The largest museum of the Three Kingdoms. In 1961, the State Council announced the first batch of national key cultural relics protection units. In 2008, it was selected as the first batch of national first-class museums.

Chengdu Wuhou Temple now covers an area of 150,000 square meters and is composed of three parts: the historical relics area (cultural relics area), the western area (the Three Kingdoms Cultural Experience Area) and the Jinli Folk Customs Area (Jinli). It enjoys the reputation of “Three Kingdoms Holy Land”.



</text> -->
            </div>
        </div>
    </div>

</template>

<style scoped>

   
    .chinahandfont {
        font-family: chinahandfont;
    }

    .app {
      /* padding-bottom: 188px; */
        /* flex: 1; */
        
        /* background-color: #ffffff; */
        /* background-color: #e90101; */
    }

    .iconr {
        width: 66px;
        height: 66px;
        color: #000000;
        /* background-color: #000000; */
        margin-top: 26px;
    }

    .iconl {
      font-size: 31px;
      color: #222222;
      margin-left: 36px;
      margin-right: 36px;
    }

    .imgWrp {
      width: 750px;
      height: 294px;
      background-color: #dfdfdf;
    }

    .imgH {
      width: 750px;
      height: 294px;
    }

    .txtWrp {
      width: 750px;
      height: 1000px;
      margin-top: 45px;
      padding-left: 37px;
      padding-right: 37px;
      /* flex-direction: row;
      flex-wrap: wrap;
      justify-content: center; */
    }

    .webview {
      flex: 1;
    }

    .txtInfo {
      height: 1000px;
      font-size: 32px;
      font-weight: bold;
      color: #222222;
    }

    .page-content {
        width: 750px;
        /* padding-top: 200px; */
        flex: 1;
        align-items: center;
        /* background-color: #efefef; */
        /* background-color: #e71414; */
    }

   
    .page-navbar {
        width: 750px;
        height: 90px;
        background-color: #ffffff;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #d5d5d5;
    }

    .page-navbar-title {
        /* color: #ffffff; */
        font-size: 32px;
        font-weight: bold;
	      color: #222222;
    }

    
</style>
<script>
    import { WxcEpSlider } from 'weex-ui';
    const eeui = app.requireModule('eeui');
    const navigationBar = app.requireModule('navigationBar');

    export default {
        components: { WxcEpSlider },
        data() {
            return {
                title: 'Hello, World!',
                desc: 'Hello, World!  Hello, EEUI! ',
                sliderId: 1,
                cardLength: 5,
                cardSize: {
                  width: 579,
                  height: 264,
                  spacing: 0,
                  scale: 0.8
                },
                lists: [],
                scrollHeight: 800,
                detailObj: {details: 'loading...'}
            }
        },

        created () {
          // console.log("========================== ");
          let uid = app.config.params.uid;
          console.info("========================== " + uid);
          this.reqInfo(uid);
        },

        mounted() {
          // navigationBar.setLeftItem({
          //   icon: 'tb-back-light',
          //   iconColor: '#222222',
          //     title: '按钮1',
          // }, function(result) {
          //     //....
          // });
          this.scrollHeight = this.contentHeight - 683;
        },

        // beforeCreate: function () {
        //     const domModule = app.requireModule('dom')
        //     domModule.addRule('fontFace', {
        //         'fontFamily': "chinahandfont",
        //         'src': "url('http://at.alicdn.com/t/font_1364538_cin699809qv.ttf')"
        //         // 'src': "url('local://eeui/pages/iconfont/chinahandfont.ttf')"
        //     });
        // },

        methods: {
            /**
             * 生命周期
             * @param res
             */
            lifecycle(res) {
                switch (res.status) {
                    case "ready":
                        //页面挂载(初始化)
                        break;

                    case "resume":
                        //页面激活(恢复)
                        break;

                    case "pause":
                        //页面失活(暂停)
                        break;
                }
            },

            reqInfo(id) {
              let vm = this;
              eeui.ajax({
                  method: 'post',
                  url: 'http://ds.paysys.cn/tourismApi/api/sceneryController/getSceneryInfo',
                  // headers: {
                  //     token: 'x2eefhjb2h3rj'
                  // },
                  dataType: 'json',
                  data: {
                      id: id
                  },
                  // files: {
                  //     userimg: '/storage/sdcard/.....'
                  // }
              }, function(result) {
                  //......
                  // console.log(" :::::::::::::::::::::::::: "  + JSON.stringify(result));
                  if (result.status === 'success') {
                    if(result.result.retCode == 1)
                    // console.log(" -------------tttt--------------- "  + JSON.stringify(result.result.data));
                    vm.detailObj = result.result.data;
                  }
              });
            },

            /**
             * 打开新页面
             * @param jsPageName    (String)JS页面名称
             * @param params        (Object)传递参数
             */
            goForward(jsPageName, params) {
                eeui.openPage({
                    url: str + ".js",
                    pageType: "app",
                    statusBarColor: "#3EB4FF",
                    params: params ? params : {}
                });
            },

            /**
             * 返回上一页(关闭当前页)
             */
            goBack() {
                eeui.closePage();
            },
            viewCode(str) {
                this.openViewCode(str);
            },
            goLogin() {
              eeui.openPage({
                pageName: 'Login',
                pageType: 'app',
                url: 'login.js'
              }, function(result) {
                  //......
              });

            }
            
        }
    }
</script>
